<template>
  <ul class="box">
    <li class="item-one" v-for="item in lists" :key="item.id" @click="goDetail(item.id)">
      <img :src="item.image" alt="图片" />
      <p>{{ item.name }}</p>
      <div class="section">{{ item.section }}</div>
      <div class="isv">{{ item.free === 1 ? "免费" : "vip" }}</div>
    </li>
  </ul>
</template>

<script>
export default {
  name: "videoList",
  props: {
    lists: {
      type: Array,
      default: ()=>{}
    },
  },
  methods: {
    goDetail(id) {
      this.$router.push({
        path:"/details",
        query:{id}
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.box {
    padding: 5px 15px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item-one {
      width: 3.4rem;
      height: 2.4rem;
      margin-bottom: 5px;
      position: relative;
      img {
        width: 100%;
        height: 2rem;
      }
      p {
        width: 100%;
        height: 0.4rem;
        line-height: 0.4rem;
        font-size: 12px;
      }
      .section{
        position: absolute;
        padding: 0 5px;
        right: 10px;
        bottom: 30px;
        background-color: rgba(162,162,182,.5);
        font-size: 12px;
        color: #fff;
      }
      .isv{
        position: absolute;
        left: 5px;
        top: 5px;
        color: chartreuse;
        font-size: 12px;
      }
    }
  }
</style>